<template>
  <div class="about">
    <h3 align="center">登录页面</h3>
    <table class="table table-bordered" align="center" width="400" height="200>">
      <tbody>
        <tr>
          <td align="right">姓名</td>
          <td><input type="text"></td>
        </tr>
        <tr>
          <td align="right">密码</td>
          <td><input type="text"></td>
        </tr>
        <tr>
          <td align="right"></td>
          <td><input type="button" @click="login" value="登录" class="btn btn-success"></td>
        </tr>
        
      </tbody>
    </table>
  </div>
</template>

<script>
//数据驱动视图
//响应式：数据变了，视图也要变
import { ref,reactive } from 'vue'
let userName = ref('')
let password = ref('')


const login = () => {
  alert(userName.value +','+ password.value)
}


</script>

<style>

</style>
